<template>
  <el-form :inline="true" :model="params.entity" style="padding-bottom: 0px;">
    <el-form-item label="题目">
      <el-input v-model="params.entity.title" placeholder="请输入题目"/>
    </el-form-item>
    <el-form-item label="题目类型">
      <el-input v-model="params.entity.questionType" placeholder="请输入题目类型"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" :icon="Search" @click="searchData">查询</el-button>
    </el-form-item>

<!--    <el-switch-->
<!--        v-model="questionSelect"-->
<!--        class="mb-2"-->
<!--        style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #ff4949"-->
<!--        active-text="已选"-->
<!--        inactive-text="未选"-->
<!--        @change="noselectSwitch"-->
<!--    />-->

  </el-form>
  <el-table
      ref="multipleTableRef"
      v-loading="loading"
            :data="tableData.list"
            style="width: 100%"
            height="450"
            :row-key="getRowKeyOfTarget"
            :default-sort="{ prop: 'date', order: 'descending' }" @selection-change="handleSelectionChange">
    <el-table-column fixed type="selection" :reserve-selection="true" width="55"/>
    <el-table-column prop="questionTypeName" label="题目类型" width="200"/>
    <el-table-column prop="title" label="题目" show-overflow-tooltip/>
    <el-table-column prop="remark" label="备注" show-overflow-tooltip/>
    <el-table-column fixed="right" label="操作" width="100" show-overflow-tooltip>
      <template #default="scope">
        <el-button link type="primary" :icon="Edit" size="small" @click="showOptions(scope.row)">查看</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination v-model:currentPage="params.current" v-model:page-size="params.size"
                 :page-sizes="[100, 200, 300, 400]" layout="sizes, prev, pager, next" :total="tableData.total"
                 @size-change="handleSizeChange" @current-change="handleCurrentChange"/>

  <el-drawer
      v-model="drawerOptions"
      title="题目选项"
      :direction="'rtl'"
      size="60%"
      :before-close="handleClose">
    <depress-question-drawer
        :questionId="currentQuestionId"
        :ruleForm="ruleForm"
        :questionOptions="questionOptions"
        :questionSolution="questionSolution"
    ></depress-question-drawer>

    <template #footer>
      <div style="flex: auto">
        <el-button @click="handleClose">取消</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import {ElTable, ElMessage, ElMessageBox} from 'element-plus'
import {onMounted, computed, reactive, ref, watch} from 'vue'
import {Params, Result} from "@/apis/model/common/common.interfaces"
import {Delete, Edit, Search, Share, Upload, Plus, Setting} from '@element-plus/icons-vue'
import {DepressQuestion}
  from "@/apis/model/depress/DepressQuestionModel";
import {deleteDepressQuestionById, depressQuestionPage, saveOrUpdateAll} from "@/apis/http/depress/DepressQuestionHttp";
import DepressQuestionDrawer from "@/views/depress/DepressQuestionDrawer.vue";
import {DepressOptions} from "@/apis/model/depress/DepressOptionsModel";
import {depressOptionsPage} from "@/apis/http/depress/DepressOptionsHttp";
import {getSolutionModelByQuestionId} from "@/apis/http/depress/DepressSolutionHttp";
import {DepressSolution} from "@/apis/model/depress/DepressSolutionModel";
import {DepressCollect} from "@/apis/model/depress/DepressCollectModel";

interface Prop {
  ruleForm: DepressCollect
}

const questionSelect = ref(false);

const props = defineProps<Prop>();

const drawerOptions = ref(false)
const currentQuestionId = ref()
// 选择数据
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<DepressQuestion[]>([])

// 选项列表
const questionOptions = ref({
  total: 0,
  list: [] as Array<DepressOptions>
});

const questionSolution = ref({} as DepressSolution)

// 查询
const questionOptionsParams: Params = reactive({
  current: 1,
  size: 10,
  search: '',
  entity: {statusFlag: 1, delFlag: 0} as DepressOptions
})

const findQuestionOptionsLists = (questionId: number) => {
  questionOptionsParams.entity.questionId = questionId;
  depressOptionsPage(questionOptionsParams).then((res: Result) => {
    const code = res.code
    const message = res.message
    const data = res.data
    if (code == 200) {
      questionOptions.value = data
    }
  })
}

const getQuestionSolution = (questionId: number) => {
  getSolutionModelByQuestionId(questionId).then(res => {
    questionSolution.value = res.data;
  })
}

const showOptions = (row: DepressQuestion) => {
  currentQuestionId.value = row.id;
  ruleForm.value = row;
  findQuestionOptionsLists(currentQuestionId.value);
  getQuestionSolution(currentQuestionId.value);
  drawerOptions.value = true;
}

// 查询
const params: Params = reactive({
  current: 1,
  size: 10,
  search: '',
  entity: {} as DepressQuestion
})

const handleClose = (done: () => void) => {
  currentQuestionId.value = -1;
  drawerOptions.value = false;
  done();
}

const ruleForm = ref<DepressQuestion>({} as DepressQuestion)

// AddOrEditVisible
const addOrEditVisible = ref(false)

// table 表数据
const tableData: any = ref({});

// 加载数据
const loading = ref(true)
const addDataType = ref('update');

/**
 * 初始化数据
 */
const initList = async () => {
  loading.value = true
  // params.entity.noselect = questionSelect.value == true ? 1 : 0
  await depressQuestionPage(params).then((res: Result) => {
    const code = res.code
    const message = res.message
    const data = res.data
    if (code == 200) {
      tableData.value = data
    }
    loading.value = false
  })
}

/**
 * search 查询数据
 */
const searchData = () => {
  initList()
}

/**
 * 每页数据量改变查询数据
 * @param val
 */
const handleSizeChange = (val: number) => {
  params.size = val
  initList()
}

/**
 * 分页查询数据
 * @param val
 */
const handleCurrentChange = (val: number) => {
  params.current = val
  initList()
}

// 翻页选中
const getRowKeyOfTarget = (row: DepressQuestion) => {
  return row.id
}

const handleSelectionChange = (val: DepressQuestion[]) => {
  multipleSelection.value = val;
  let selectIdss: number[] = [];
  props.ruleForm.selectIds = [];
  for (var i = 0; i < multipleSelection.value.length; i++) {
    props.ruleForm.selectIds.push(multipleSelection.value[i].id)
  }
}

const toggleSelection = (rows?: DepressQuestion[]) => {
  if (rows && rows.length > 0) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}

const setMultipleSelection = () => {
  console.log("setMultipleSelection--------------")
  let list: Array<DepressQuestion> = tableData.value.list;
  multipleSelection.value = [];
  if (props.ruleForm.selectIds && props.ruleForm.selectIds.length !=0) {
    for (var i = 0; i < list.length; i++) {
      let datail: DepressQuestion = list[i];
      if (props.ruleForm.selectIds.length > 0 && props.ruleForm.selectIds.indexOf(datail.id) > -1) {
        multipleSelection.value.push(datail)
      }
    }
    toggleSelection(multipleSelection.value)
  } else {
    multipleSelection.value = []
    toggleSelection(multipleSelection.value)
  }
}


watch(() => props.ruleForm, () =>{
  if (props.ruleForm.selectIds) {
    console.log('props.ruleForm' + props.ruleForm)
    setMultipleSelection();
  } else {
    multipleSelection.value = []
    toggleSelection(multipleSelection.value)
  }
})

const noselectSwitch = (e) =>{
  console.log(e);

}


onMounted(async () => {
  await initList();
  setMultipleSelection();
})
</script>

<style>
</style>
